<template>
  <a-spin
    :loading="spinLoading"
    :size="35"
    class="w-full min-h-[400px]"
    tip="正在加载法规详情..."
  >
    <div class="max-w-4xl mx-auto p-6 bg-white">
      <!-- 法规标题 -->
      <div class="text-center mb-8">
        <h1
          class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800 leading-tight"
        >
          {{ form.lawsTitle }}
        </h1>
      </div>

      <!-- 法规元信息 -->
      <div class="mb-8">
        <a-card class="shadow-sm border-0 bg-gray-50">
          <div
            class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600"
          >
            <div class="flex items-center space-x-2">
              <icon-calendar class="text-green-500" />
              <span class="font-medium">发布时间：</span>
              <span class="text-gray-800">{{ form.publishTime }}</span>
            </div>
            <div class="flex items-center space-x-2">
              <icon-tag class="text-orange-500" />
              <span class="font-medium">法规状态：</span>
              <a-tag
                :color="getStatusColor(form.status)"
                class="ml-1"
              >
                {{ getStatusLabel(form.status) }}
              </a-tag>
            </div>
            <div class="flex items-center space-x-2">
              <icon-file-text class="text-blue-500" />
              <span class="font-medium">法规编号：</span>
              <span class="text-gray-800">{{ form.lawsId || 'N/A' }}</span>
            </div>
            <div class="flex items-center space-x-2">
              <icon-clock-circle class="text-purple-500" />
              <span class="font-medium">创建时间：</span>
              <span class="text-gray-800">{{ form.createTime }}</span>
            </div>
          </div>
        </a-card>
      </div>

      <!-- 法规内容 -->
      <div class="mb-8">
        <a-divider orientation="left">
          <span class="text-lg font-semibold text-gray-700">法规内容</span>
        </a-divider>
        <div
          class="prose prose-lg max-w-none text-gray-700 leading-relaxed whitespace-pre-wrap"
        >
          {{ form.lawsContent }}
        </div>
      </div>

      <!-- 附件文件 -->
      <div class="mb-8" v-if="form.lawsFiles && form.lawsFiles.length > 0">
        <a-divider orientation="left">
          <span class="text-lg font-semibold text-gray-700">相关附件</span>
        </a-divider>
        <div class="space-y-2">
          <div
            v-for="(file, index) in form.lawsFiles"
            :key="file.fileId || index"
            class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
          >
            <div class="flex items-center space-x-3">
              <icon-file class="text-blue-500" />
              <div>
                <div class="font-medium text-gray-800">{{ file.fileName }}</div>
                <div class="text-sm text-gray-500">
                  大小：{{ formatFileSize(file.fileSize) }} | 类型：{{ file.fileType }}
                </div>
              </div>
            </div>
            <a-button
              type="primary"
              size="small"
              @click="downloadFile(file)"
            >
              <icon-download class="mr-1" />
              下载
            </a-button>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="border-t pt-6 mt-8">
        <div
          class="flex flex-wrap justify-between items-center text-sm text-gray-500"
        >
          <div class="flex items-center space-x-4">
            <span>
              <icon-user class="mr-1" />
              法规编号：{{ form.lawsId }}
            </span>
            <span>
              <icon-calendar class="mr-1" />
              最后更新：{{ form.createTime }}
            </span>
          </div>
          <div class="text-gray-400">
            状态：{{ getStatusLabel(form.status) }}
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, watch } from "vue";
import { getLawsByLawsIdApi } from "~/api/lindi/laws.js";

//全局实例
const { proxy } = getCurrentInstance();

//加载中...
const spinLoading = ref(false);

//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});

//表单
const form = reactive({
  //法规ID
  lawsId: null,
  //法规标题
  lawsTitle: null,
  //法规内容
  lawsContent: null,
  //发布时间
  publishTime: null,
  //法规状态
  status: null,
  //创建时间
  createTime: null,
  //附件文件ID
  lawsFileId: "",
  //附件文件列表
  lawsFiles: [],
});

// 状态选项
const statusOptions = [
  { label: "有效", value: 1, color: "green" },
  { label: "无效", value: 0, color: "red" },
  { label: "草案", value: 2, color: "orange" },
];



//加载法规详细信息
const loadLawsInfo = (lawsId) => {
  spinLoading.value = true;
  
  getLawsByLawsIdApi(lawsId)
    .then((res) => {
      if (res.success) {
        // 数据赋值
        for (let key in res.data) {
          if (form.hasOwnProperty(key)) {
            form[key] = res.data[key];
          }
        }
      } else {
        console.error("获取法规详情失败:", res.message);
        proxy.$msg.error("获取法规详情失败");
      }
    })
    .catch((error) => {
      console.error("获取法规详情异常:", error);
      proxy.$msg.error("加载法规信息时发生错误");
    })
    .finally(() => {
      spinLoading.value = false;
    });
};

// 获取状态标签
const getStatusLabel = (status) => {
  const option = statusOptions.find(item => item.value === status);
  return option ? option.label : "未知";
};

// 获取状态颜色
const getStatusColor = (status) => {
  const option = statusOptions.find(item => item.value === status);
  return option ? option.color : "gray";
};

//格式化文件大小
const formatFileSize = (size) => {
  if (!size) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  let index = 0;
  let fileSize = size;
  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024;
    index++;
  }
  return `${fileSize.toFixed(1)} ${units[index]}`;
};

//下载文件
const downloadFile = (file) => {
  if (file.fileUrl) {
    window.open(file.fileUrl, "_blank");
  } else {
    proxy.$msg.warning("文件下载链接不存在");
  }
};

//监听参数变化
watch(
  () => props.params,
  (newVal, oldVal) => {
    //法规ID
    if (props.params.lawsId) {
      //查询数据
      loadLawsInfo(props.params.lawsId);
    }
  },
  { deep: true, immediate: true }
);
</script>

<style scoped>
/* 法规内容样式优化 */
.prose {
  @apply text-gray-700;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply text-gray-800 font-semibold mt-6 mb-4;
}

.prose h1 {
  @apply text-2xl;
}

.prose h2 {
  @apply text-xl;
}

.prose h3 {
  @apply text-lg;
}

.prose p {
  @apply mb-4 leading-relaxed;
}

.prose blockquote {
  @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4;
}

.prose ul,
.prose ol {
  @apply my-4 pl-6;
}

.prose li {
  @apply mb-2;
}

.prose table {
  @apply w-full border-collapse border border-gray-300 my-6;
}

.prose th,
.prose td {
  @apply border border-gray-300 px-4 py-2;
}

.prose th {
  @apply bg-gray-100 font-semibold;
}

.prose code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}

.prose pre {
  @apply bg-gray-100 p-4 rounded-lg overflow-x-auto my-4;
}

.prose a {
  @apply text-blue-600 hover:text-blue-800 underline;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .prose {
    @apply text-sm;
  }

  .prose h1 {
    @apply text-xl;
  }

  .prose h2 {
    @apply text-lg;
  }

  .prose h3 {
    @apply text-base;
  }
}
</style>